<template>
  <div class="grid-container">
    <!-- 6个图表 -->
    <div v-for="(chart, index) in charts" :key="index" :ref="el => { if (el) chartsRefs[index] = el }"
         class="chart-item">
      <h3>{{ chart.title }}</h3>
      <div class="chart"></div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, reactive, ref } from 'vue';

// 假数据
const diseaseData = {
  categories: ['高血压', '糖尿病', '冠心病', '哮喘', '关节炎'],
  counts: [120, 95, 70, 45, 60],
  dates: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  trends: [10, 20, 15, 25, 30, 28, 35],
  regions: [
    { name: '北京', value: 100 },
    { name: '上海', value: 80 },
    { name: '广州', value: 60 },
    { name: '深圳', value: 40 },
    { name: '成都', value: 50 }
  ],
  // 雷达图数据
  radarData: {
    indicators: [
      { name: '高血压', max: 150 },
      { name: '糖尿病', max: 120 },
      { name: '冠心病', max: 100 },
      { name: '哮喘', max: 80 },
      { name: '关节炎', max: 90 }
    ],
    values: [110, 85, 75, 40, 55]
  }
};

const chartsRefs = ref([]);
const charts = reactive([
  {
    title: '各地区患病人数',
    type: 'bar',
    data: diseaseData.regions.map(region => ({ name: region.name, value: region.value }))
  },
  {
    title: '各类疾病患者数量',
    type: 'bar',
    data: diseaseData.counts
  },
  {
    title: '疾病种类占比',
    type: 'pie',
    data: diseaseData.categories.map((cat, i) => ({ name: cat, value: diseaseData.counts[i] }))
  },
  {
    title: '一周内新增病例趋势',
    type: 'line',
    data: diseaseData.trends
  },
  {
    title: '年龄分布',
    type: 'pie',
    data: [{ name: '20-30岁', value: 50 }, { name: '31-40岁', value: 70 }, { name: '41-50岁', value: 60 }]
  },
  {
    title: '疾病分布雷达图',
    type: 'radar',
    data: diseaseData.radarData
  }
]);

onMounted(() => {
  // 初始化所有图表
  charts.forEach((chart, index) => {
    const chartElement = chartsRefs.value[index]?.querySelector('.chart');
    if (!chartElement) return;

    const chartInstance = echarts.init(chartElement, null, { renderer: 'canvas' });
    let option;
    switch (chart.type) {
      case 'radar':
        option = getRadarOption(chart);
        break;
      default:
        option = getChartOption(chart);
    }

    chartInstance.setOption(option);
  });
});

function getChartOption(chart) {
  switch (chart.type) {
    case 'bar':
      return {
        tooltip: {},
        xAxis: {
          data: chart.data.map(item => typeof item === 'object' ? item.name : '')
        },
        yAxis: {},
        series: [{
          name: '人数',
          type: 'bar',
          data: chart.data.map(item => typeof item === 'object' ? item.value : item),
          itemStyle: { color: '#409EFF' },
          barGap: '-100%',
          z: 10
        }],
        grid: { top: 30, bottom: 20, left: 20, right: 20 }
      };
    case 'pie':
      return {
        tooltip: { trigger: 'item' },
        legend: { top: '10%' },
        series: [{
          type: 'pie',
          data: chart.data,
          radius: '70%'
        }]
      };
    case 'line':
      return {
        tooltip: { trigger: 'axis' },
        xAxis: { data: diseaseData.dates },
        yAxis: {},
        series: [{
          name: '人数',
          type: 'line',
          data: chart.data,
          smooth: true,
          itemStyle: { color: '#F56C6C' },
          lineStyle: { width: 2 }
        }],
        grid: { top: 30, bottom: 20, left: 20, right: 20 }
      };
    default:
      return {};
  }
}

function getRadarOption(chart) {
  const data = chart.data;
  return {
    title: { text: chart.title },
    tooltip: {},
    radar: {
      indicator: data.indicators,
      shape: 'circle',
      splitNumber: 5,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#ccc'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(120, 120, 120, 0.5)'
        }
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(255, 255, 255, 0.3)', 'rgba(200, 200, 255, 0.1)']
        }
      }
    },
    series: [{
      name: '疾病分布',
      type: 'radar',
      symbol: 'none',
      areaStyle: {
        color: 'rgba(143, 188, 143, 0.6)'
      },
      lineStyle: {
        color: '#228B22',
        width: 2
      },
      data: [{
        value: data.values,
        name: '疾病分布'
      }]
    }]
  };
}
</script>

<style scoped>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 20px;
}

.chart-item {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  height: 300px;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.chart-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden; /* 新增 */
  height: 300px; /* 可根据需要调整 */
}

.chart {
  width: 100%;
  height: 100%;
}
</style>